<template>
    <!-- 自定义播放组件 -->
    <div class="flex">
        <div class="flex-column sw-title-content">
            <div class="flex1" style=" white-space: nowrap;overflow: hidden;">
                <img class="sw-title-img" src="@/assets/images/station.png">
                <span class="sw-room-num">{{ station.roomNum || 0 }}个台站</span>
            </div>
            <div class="flex1">{{ station.name }}</div>
        </div>
        <div style="overflow: hidden;">
            <div class="moveLeft-page" :id="id">
                <sw-video v-for="video, index in videoList" :url="video.url" :name="video.name" :key="video.name"
                    @fullscreen="fullscreenChange" v-show="index < showNum"></sw-video>
            </div>
        </div>

    </div>
</template>

<script>
import mpegts from 'mpegts.js'; // 测试能播放H.264编码方式
import swVideo from './sw-video.vue';

export default {
    name: 'sw-video-list',
    emits: ['fullscreen'],
    components: { swVideo },
    props: {
        // 间隔时间
        step: { type: Number, default: 3000 },
        // 显示的视频数量
        showNum: { type: Number, default: 5 },
        // 台站数据
        station: {
            required: true,
            type: Object, default: () => {
                return {
                    videoListAll: [],
                    name: '',
                    roomNum: 0
                }
            }
        }
    },
    computed: {
        videoList() {
            let startList = [];
            let endList = []
            if (this.videoListAll && this.videoListAll.length > 0) {
                for (let i in this.videoListAll) {
                    if (i < this.startIndex) {
                        endList.push(this.videoListAll[i])
                    } else {
                        startList.push(this.videoListAll[i])
                    }
                }
            }
            let list = startList.concat(endList);
            return list.splice(0, this.showNum + 2) || [];
        }
    },
    watch: {
        // 存在全屏的视频则停止滚动
        isFullscreen(val) {
            if (val) {
                if (this.interval) clearInterval(this.interval);
            } else {
                this.start()
            }
        }
    },
    data() {
        return {
            id: null,
            // 起始索引
            startIndex: 0,
            // 是否开启了全屏
            isFullscreen: false,
            // 机房数量
            roomNum: 0,
            // 循环函数
            interval: null,
            // 视频列表
            videoListAll: []
        }
    },
    created() {
        this.id = this.$uuid();
        if (this.station.videoListAll) this.videoListAll = this.station.videoListAll
    },
    mounted() {
        this.$nextTick(() => {
            try {
                if (this.showNum < this.videoListAll.length) this.start()
            } catch (e) { console.log('计算出错', this.id) }

        })
    },
    methods: {
        // 开始循环
        start() {
            if (this.interval) clearInterval(this.interval);
            this.interval = setInterval(() => {
                if (this.videoListAll && this.videoListAll.length > 0) {
                    if (this.startIndex < this.videoListAll.length - 1) {
                        this.startIndex++
                    } else {
                        this.startIndex = 0
                    }
                }
            }, this.step)
        },

        // 是否开启了全屏
        fullscreenChange(isFullscreen) {
            this.isFullscreen = isFullscreen;
            this.$emit('fullscreen', isFullscreen)
        },

    }
}
</script>

<style lang="scss" scoped>
.sw-title-content {
    width: 8rem;
    padding-left: 1.5rem;
    box-sizing: border-box;
    font-size: 1.25rem;
}

.sw-title-img {
    margin-top: 1rem;
    width: 3rem;
}


/* 定义动画 */
@keyframes moveLeft {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-17.5rem);
    }
}

.moveLeft-page {
    // animation: moveLeft 3s infinite;
    width: 100vw;
    display: flex;
    white-space: nowarp;
}
</style>